<template>
  <de-container class="pa-5">
    <avue-crud
      ref="crud"
      v-model="form"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      :before-open="beforeOpen"
      :search.sync="searchForm"
      @on-load="loadListData"
      @search-change="onSearchChange"
      @search-reset="onSearchReset"
      @row-save="onRowSave"
      @row-update="onRowUpdate"
      @row-del="onRowDelete"
      @refresh-change="onRefresh"
      @selection-change="onSelectionChange"
      @filter-change="onFilterChange"
      @sort-change="onSortChange"
    >
      <template slot="disabled" slot-scope="scope">
        <el-tag :type="!scope.row.disabled ? 'success' : 'danger'">{{ scope.row.disabled ? '禁用' : '启用' }}</el-tag>
      </template>
      <template slot="menu" slot-scope="{ size, row }">
        <el-button type="text" icon="el-icon-setting" :size="size" @click="onConfigClick(row)"> 数据 </el-button>
        <el-button
          v-show="!row.disabled"
          type="text"
          icon="el-icon-circle-close"
          :size="size"
          @click="onChangeStatus(row, 1)"
        >
          禁用
        </el-button>
        <el-button
          v-show="row.disabled"
          type="text"
          icon="el-icon-circle-check"
          :size="size"
          @click="onChangeStatus(row, 0)"
        >
          启用
        </el-button>
      </template>
    </avue-crud>
    <el-dialog
      :title="`【${configRow.typeName}】数据`"
      :visible.sync="showConfig"
      class="avue-dialog avue-crud__dialog"
      width="60%"
    >
      <DictDataList :type-id="configRow.id" :dict-code="configRow.typeCode" />
      <div class="avue-dialog__footer">
        <el-button size="small" icon="el-icon-close" @click="showConfig = false">关闭</el-button>
      </div>
    </el-dialog>
  </de-container>
</template>

<script>
import {
  requestSystemDictTypePage,
  requestSystemDictTypeCreate,
  requestSystemDictTypeUpdate,
  requestSystemDictTypeDelete,
} from '@/api/system/dict'
import DeContainer from '@/components/dataease/DeContainer'
import ListMixin from '@/utils/mixins/list-mixin'
import DictDataList from './components/dict-data'

export default {
  name: 'SystemDictTypeList',
  components: { DictDataList, DeContainer },
  mixins: [ListMixin],
  data() {
    var validateTrim = (rule, value, callback) => {
      if (value.trim() === '') {
        callback(new Error('请输入'))
      } else {
        callback()
      }
    }
    return {
      listApi: requestSystemDictTypePage,
      createApi: requestSystemDictTypeCreate,
      updateApi: requestSystemDictTypeUpdate,
      deleteApi: requestSystemDictTypeDelete,
      tableOption: {
        selection: false,
        menuWidth: 160,
        addTitle: '新增',
        editTitle: '编辑',
        viewTitle: '查看',
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        searchMenuPosition: 'left',
        column: [
          {
            label: '名称',
            prop: 'typeName',
            type: 'input',
            minlength: 0,
            maxlength: 50,
            showWordLimit: true,
            align: 'left',
            search: true,
            span: 24,
            rules: [
              { required: true, message: '请输入名称' },
              { validator: validateTrim, trigger: 'blur' },
            ],
          },
          {
            label: '编码',
            prop: 'typeCode',
            type: 'input',
            minlength: 0,
            maxlength: 50,
            showWordLimit: true,
            align: 'left',
            search: true,
            span: 24,
            rules: [
              { required: true, message: '请输入编码' },
              { validator: validateTrim, trigger: 'blur' },
            ],
          },
          {
            label: '状态',
            prop: 'disabled',
            type: 'radio',
            slot: true,
            dicData: [
              { label: '禁用', value: 1 },
              { label: '启用', value: 0 },
            ],
            value: 0,
            span: 24,
            display: false,
          },
          {
            label: '描述',
            prop: 'description',
            type: 'textarea',
            minlength: 0,
            maxlength: 255,
            showWordLimit: true,
            align: 'left',
            overHidden: true,
            span: 24,
          },
        ],
      },

      configRow: {},
      showConfig: false,
    }
  },
  methods: {
    beforeOpen(done, type) {
      if (type === 'add') {
        // this.form.tenantId = 0
      }
      done()
    },
    onConfigClick(row) {
      this.configRow = row
      this.showConfig = true
    },
    async onChangeStatus(row, disabled) {
      try {
        await this.$confirm(`确定${disabled === 1 ? '禁用' : '启用'}${row.typeName}吗?`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
      } catch (error) {
        console.log('取消')
        return
      }
      requestSystemDictTypeUpdate({ id: row.id, disabled }).then((res) => {
        if (res.success) {
          const tips = disabled === 1 ? '禁用' : '启用'
          disabled === 1
            ? this.$message.error(`${row.typeName}${tips}成功`)
            : this.$message.success(`${row.typeName}${tips}成功`)
        } else {
          this.$message.error(res.message)
        }
        this.onRefresh()
      })
    },
  },
}
</script>

<style lang="scss"></style>
